<template>
  <div v-loading="loading">
    <el-form :model="info" ref="info" :rules="rules" label-width="130px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商机名称：" prop="projectName">
            <el-input v-model="info.projectName" style="width:202px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公司：" prop="companyId">
            <el-select v-model="info.companyId" style="width:202px;" placeholder="请选择">
              <el-option
                v-for="item in companies"
                :key="item.id"
                :label="item.companyName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商机类别：" prop="projectType">
            <el-select
              v-model="info.projectType"
              style="width:202px;"
              v-if="createDicsObj.PROJECT_TYPE"
              placeholder="请选择"
            >
              <el-option
                v-for="item in createDicsObj.PROJECT_TYPE.children"
                :key="item.dicCode"
                :label="item.dicName"
                :value="item.dicCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成立时间：" prop="foundTime">
            <el-date-picker
              style="width:202px;"
              format="yyyy 年"
              v-model=" info.foundTime"
              value-format="yyyy"
              type="year"
              placeholder="选择年"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="品牌源地：" prop="birthplace">
            <el-input v-model="info.birthplace" style="width:202px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加盟区域：" prop="franchiseArea">
            <el-input v-model="info.franchiseArea" style="width:202px;"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="经营品种：" prop="category">
            <el-input v-model="info.category" style="width:202px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="适合人群：" prop="suitCrowd">
            <el-input v-model="info.suitCrowd" style="width:202px;"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最小投资金额：">
            <el-input-number v-model="info.investmentMin" :min="0" label="最小投资金额"/>&nbsp;(万元)
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大投资金额：" style="marginLeft:10px;">
            <el-input-number
              v-model="info.investmentMax"
              :min="Number(info.investmentMin)"
              label="最大投资金额"
            />&nbsp;(万元)
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="门店数：" prop="storeNumber">
            <el-input v-model="info.storeNumber" style="width:202px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加盟店：">
            <el-select
              v-model="info.franchisedStoreNumber"
              style="width:202px;"
              clearable
              placeholder="加盟店"
            >
              <el-option
                v-for="item in franchisedStoreArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="直营店：">
            <el-select
              v-model="info.directShopNumbers"
              style="width:202px;"
              clearable
              placeholder="直营店"
            >
              <el-option
                v-for="item in franchisedStoreArr1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否精选：">
            <el-switch v-model="info.isSelected"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="推荐指数：" style="display:block;">
            <el-rate v-model="info.recommendNumber" style="lineHeight:2.4"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否平台担保：">
            <el-switch v-model="info.warrant"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="排序：" prop="sort">
            <el-input v-model="info.sort" style="width:202px;"/>
          </el-form-item>
        </el-col>
      </el-row>
       <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="360全景地址：">
            <el-input v-model="info.panoramic " style="width:202px;"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="标签项：" v-if="tagsArr.length" style="display:block;">
            <NewTags :data="tagsArr" :initData="initDataArr" @changeTag="changeLabel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="描述：" style="display:block;">
            <el-input
              placeholder="请输入描述"
              type="textarea"
              rows="3"
              resize="none"
              maxlength="1000"
              v-model="info.description"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="摘要：" style="display:block;">
            <el-input
              placeholder="请输入备注"
              type="textarea"
              rows="3"
              resize="none"
              show-word-limit
              v-model="info.remark"
              maxlength="1000"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16" style="textAlign:center">
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提 交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
const selectArr = [
  {
    label: '1-10',
    value: '1-10'
  },
  {
    label: '10-50',
    value: '10-50'
  },
  {
    label: '50-200',
    value: '50-200'
  },
  {
    label: '200-500',
    value: '200-500'
  },
  {
    label: '500-1000',
    value: '500-1000'
  },
  {
    label: '1000-2000',
    value: '1000-2000'
  }
]
import { createDics } from '~/utils/util';
import NewTags from '~/components/commom/newTags';
import regular from '~/utils/regular';
import mmUrl from '~/utils/utilUrl';
export default {
  components: {
    NewTags
  },
  props: ["id"],
  data() {
    return {
      tagsArr: [],
      initDataArr: [],
      companies: [],
      loading: true,
      info: {
        foundTime: '',
        birthplace: '',
        franchiseArea: '',
        category: '',
        suitCrowd: '',
        projectName: '',
        companyId: '',
        isSelected: true,
        warrant: true,
        recommendNumber: 0,
        franchisedStoreNumber: '',
        directShopNumbers: '',
        storeNumber: '',
        remark: '',
        description: '',
        investmentMax: '',
        investmentMin: '',
        suitCrowd: '',
        category: '',
        sort: '',
        panoramic:''
      },
      editor: this.$props.id === "create",
      createDicsObj: {},
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      ruleForm: {
        name: ''
      },
      dics: [],
      franchisedStoreArr: selectArr.slice(),
      franchisedStoreArr1: selectArr.slice(),
      rules: {
        projectName: [
          { required: true, message: '此项为必填项', trigger: 'blur' },
          { max: 50, message: '最大长度50个字符', trigger: 'blur' }
        ],
        companyId: regular.requireChange,
        projectType: regular.requireChange,
        foundTime: regular.require1,
        birthplace: regular.require2,
        franchiseArea: regular.require2,
        category: regular.require2,
        suitCrowd: regular.require2,
        storeNumber: regular.number,
        sort: regular.sort1
      }
    }
  },
  mounted() {
    this.$post({
      url: !this.editor
        ? mmUrl.project.loadEditProjectPage
        : mmUrl.project.loadCreateProjectPage,
      data: {
        id: !this.editor ? this.$props.id : ''
      }
    }).then(res => {
      this.companies = res.companies
      this.loading = false
      this.dics = res.dics
      this.createDicsObj = createDics(res.dics, 'dicCode')
      this.getInitLabel()
      this.initDataArr = res.item ? JSON.parse(res.item.label) : '';
      if (!this.editor) {
        this.info = res.item
        this.loading = false
        return false
      }
    })
  },
  methods: {
    getInitLabel() {
      this.$post({
        url: mmUrl.label.pageLoad,
        data: {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          },
          type: 0
        }
      }).then(res => {
        this.tagsArr = res.items.items
      })
    },
    handleSubmit() {
      this.$refs['info'].validate(valid => {
        if (valid) {
          const item = JSON.parse(JSON.stringify(this.info))
          item.sort = Number(item.sort)
          this.$post({
            url: !this.editor
              ? mmUrl.project.editProject
              : mmUrl.project.createProject,
            data: {
              item
            }
          })
            .then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('closeDialog')
            })
            .catch(() => {})
        }
      })
    },
    changeIndustry(e) {
      this.info.projectType = e
    },
    changeLabel(res) {
      this.info.label = JSON.stringify(res)
    }
  }
}
</script>

<style lang='scss' module>
</style>
